<template>
  <div class="Access">
    <div class="access_top">13244</div>
    <div class="access_tit">
      <div class="access_tit_line"></div>
      <div>&nbsp;&nbsp;评估结果</div>
    </div>
    <div class="access_bot">1653213546</div>
    <div class="btnUnion">
      <div class="custom-valueButton" @click="gotoAssess">课程打分</div>
      <div class="custom-valueButton" @click="keepTrain">继续训练</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();

const gotoAssess = (): void => {};
const keepTrain = (): void => {
  router.push({
    path: '/',
  });
};
</script>

<style scoped lang="less">
.Access {
  height: 100vh;
  .access_top {
    width: 98%;
    margin: 0 auto;
    height: 300px;
    background-color: #283469;
    border-radius: 10px;
  }
  .access_tit {
    display: flex;
    align-items: center;
    color: #fff;
    margin: 20px;
    font-size: 18px;
    .access_tit_line {
      width: 10px;
      height: 30px;
      background-color: #025cfc;
    }
  }
  .access_bot {
    width: 98%;
    height: 370px;
    margin: 0 auto;
    background-color: #283469;
    border-radius: 10px;
  }
  .btnUnion {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 999;
    height: 100px;
    background-color: #262836;
    .custom-valueButton {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      cursor: pointer;
      margin: 0 20px;
      background-color: #262836;
      font-size: 16px;
      border: 2px solid #6b6e78;
    }
    .custom-valueButton:hover {
      width: 180px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      cursor: pointer;
      margin: 0 20px;
      background: url('@/assets/home/activeBackground.svg') no-repeat;
      background-size: cover;
      font-size: 16px;
    }
  }
}
</style>
